$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

$timeline-date-height: 3.75rem;
$timeline-item-height: 5rem;
$timeline-triangle-top: 1.8rem;
$timeline-triangle-before: 0.78rem;
$timeline-triangle-after: 0.7rem;

$anchorTextColor: #fff;
$panelBackgroundColor: #fff;
$panelBorderColor: #ccc;
$anchorBgColor: #acb7c0;
$timelineCenterColor: #cccccc;

timeline {
  position: relative;
}
.timeline {
  padding: 0;


  background-image: url(../../assets/img/bg-grey.png);
  background-size: 0.1rem 9999rem;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position: 5.48rem 11rem;

  .timeline-item {
    display: flex;
    position: relative;
    margin-bottom: 1rem;

    &:before, &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }

    &.for-group {
      height: $timeline-date-height;
    }
    &.for-item {
      height: $timeline-item-height;
    }

    .timeline-time {
      margin: 0;
      padding: 0;
      width: 3rem;

      text-align: right;
      &.for-group div {
        display: none;
      }
      &.for-item div {
        &.one-line {
            padding: 1.7rem 0;
        }
        &.two-line {
            padding: 1.1rem 0;
        }
      }
      .time {
        margin-right: 0rem;
      }
    }

    .timeline-panel {
      flex: 1;
      margin-left: 0.5rem;
      position: relative;
      background-color: $panelBackgroundColor;

      border: 0.083rem solid #d4d4d4;
      border-radius: 0.166rem;

      box-shadow: 0 0.083rem 0.25rem rgba(0, 0, 0, 0.175);
      font-size: 2rem;

      &:before {
        position: absolute;
        top: $timeline-triangle-top;
        left: -$timeline-triangle-before;
        display: inline-block;
        border-top: $timeline-triangle-before solid transparent;
        border-left: $timeline-triangle-before solid $panelBorderColor;
        border-left-width: 0;
        border-right: 0 solid $panelBorderColor;
        border-right-width: $timeline-triangle-after;
        border-bottom: $timeline-triangle-before solid transparent;
        content: " ";
      }

      &:after {
        position: absolute;
        top: $timeline-triangle-top + 0.1rem;
        left: -$timeline-triangle-after;
        display: inline-block;
        border-top: $timeline-triangle-after solid transparent;
        border-left: $timeline-triangle-after solid $panelBackgroundColor;
        border-left-width: 0;
        border-right: 0 solid $panelBackgroundColor;
        border-right-width: $timeline-triangle-after;
        border-bottom: $timeline-triangle-after solid transparent;
        content: " ";
      }

      &.for-group {
        line-height: $timeline-date-height;
        border: 0;
        box-shadow: none;
        color: #4AB8FE;

        &:before, &:after {
          border: 0;
        }
      }
      &.for-item {
        padding: 0 1rem;
      }

      .timeline-heading {
        line-height: 2.8rem;
        font-size: 1.8rem;
      }
      .timeline-descr {
        line-height: 1.5rem;
        font-size: 1.5rem;
      }

    }

    .timeline-badge {
      position: relative;
      width: 3rem;
      .badge {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        background-color: #27A1D7 !important;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;

        &.for-group {
          width: 3rem;
          height: 3rem;
          background-size: 50%;
          background-repeat: no-repeat;
          background-position: center;
          background-image: url(../../assets/img/icon-timeline-date.png);
        }
        &.for-item {
          width: 1.3rem;
          height: 1.3rem;
        }
      }
    }
  }
}

